<template>
  <div class="articleContent">
      <mavon-editor v-model="value" :editable=false :toolbars={preview:false,subfield:false} :placeholder="v1" :preview=true class="editor"></mavon-editor>
  </div>
</template>

<script type="text/ecmascript-6">
  // Local Registration
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  import axios from 'axios'

  export default {
    data () {
      return {
        value: ' ',
        id: this.$route.params.id,
        v1: '',
        url: 'http://localhost:8080/article/getArticle.do?articleId='
      }
    },
    components: {
      mavonEditor
      // or 'mavon-editor': mavonEditor
    },
    created: function () {
      axios.get(this.url + this.id, {
      }).then(response => {
        console.log(response.data)
        this.value = response.data.articleContent.text
      }).catch(error => {
        console.log(error)
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .editor
    margin: auto
    width: 80%
    height: 700px
</style>
